<script setup>
  import { useLayout } from '@/layouts/components/composables/layout'
  import { onMounted, ref, watch } from 'vue'

  const { getPrimary, getSurface, isDarkTheme } = useLayout()
  const lineData = ref(null)
  const pieData = ref(null)
  const polarData = ref(null)
  const barData = ref(null)
  const radarData = ref(null)
  const lineOptions = ref(null)
  const pieOptions = ref(null)
  const polarOptions = ref(null)
  const barOptions = ref(null)
  const radarOptions = ref(null)

  onMounted(() => {
    setColorOptions()
  })

  function setColorOptions() {
    const documentStyle = getComputedStyle(document.documentElement)
    const textColor = documentStyle.getPropertyValue('--text-color')
    const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary')
    const surfaceBorder = documentStyle.getPropertyValue('--surface-border')

    barData.value = {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'My First dataset',
          backgroundColor: documentStyle.getPropertyValue('--p-primary-500'),
          borderColor: documentStyle.getPropertyValue('--p-primary-500'),
          data: [65, 59, 80, 81, 56, 55, 40],
        },
        {
          label: 'My Second dataset',
          backgroundColor: documentStyle.getPropertyValue('--p-primary-200'),
          borderColor: documentStyle.getPropertyValue('--p-primary-200'),
          data: [28, 48, 40, 19, 86, 27, 90],
        },
      ],
    }
    barOptions.value = {
      plugins: {
        legend: {
          labels: {
            fontColor: textColor,
          },
        },
      },
      scales: {
        x: {
          ticks: {
            color: textColorSecondary,
            font: {
              weight: 500,
            },
          },
          grid: {
            display: false,
            drawBorder: false,
          },
        },
        y: {
          ticks: {
            color: textColorSecondary,
          },
          grid: {
            color: surfaceBorder,
            drawBorder: false,
          },
        },
      },
    }

    pieData.value = {
      labels: ['A', 'B', 'C'],
      datasets: [
        {
          data: [540, 325, 702],
          backgroundColor: [
            documentStyle.getPropertyValue('--p-indigo-500'),
            documentStyle.getPropertyValue('--p-purple-500'),
            documentStyle.getPropertyValue('--p-teal-500'),
          ],
          hoverBackgroundColor: [
            documentStyle.getPropertyValue('--p-indigo-400'),
            documentStyle.getPropertyValue('--p-purple-400'),
            documentStyle.getPropertyValue('--p-teal-400'),
          ],
        },
      ],
    }

    pieOptions.value = {
      plugins: {
        legend: {
          labels: {
            usePointStyle: true,
            color: textColor,
          },
        },
      },
    }

    lineData.value = {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'First Dataset',
          data: [65, 59, 80, 81, 56, 55, 40],
          fill: false,
          backgroundColor: documentStyle.getPropertyValue('--p-primary-500'),
          borderColor: documentStyle.getPropertyValue('--p-primary-500'),
          tension: 0.4,
        },
        {
          label: 'Second Dataset',
          data: [28, 48, 40, 19, 86, 27, 90],
          fill: false,
          backgroundColor: documentStyle.getPropertyValue('--p-primary-200'),
          borderColor: documentStyle.getPropertyValue('--p-primary-200'),
          tension: 0.4,
        },
      ],
    }

    lineOptions.value = {
      plugins: {
        legend: {
          labels: {
            fontColor: textColor,
          },
        },
      },
      scales: {
        x: {
          ticks: {
            color: textColorSecondary,
          },
          grid: {
            color: surfaceBorder,
            drawBorder: false,
          },
        },
        y: {
          ticks: {
            color: textColorSecondary,
          },
          grid: {
            color: surfaceBorder,
            drawBorder: false,
          },
        },
      },
    }

    polarData.value = {
      datasets: [
        {
          data: [11, 16, 7, 3],
          backgroundColor: [
            documentStyle.getPropertyValue('--p-indigo-500'),
            documentStyle.getPropertyValue('--p-purple-500'),
            documentStyle.getPropertyValue('--p-teal-500'),
            documentStyle.getPropertyValue('--p-orange-500'),
          ],
          label: 'My dataset',
        },
      ],
      labels: ['Indigo', 'Purple', 'Teal', 'Orange'],
    }

    polarOptions.value = {
      plugins: {
        legend: {
          labels: {
            color: textColor,
          },
        },
      },
      scales: {
        r: {
          grid: {
            color: surfaceBorder,
          },
        },
      },
    }

    radarData.value = {
      labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
      datasets: [
        {
          label: 'My First dataset',
          borderColor: documentStyle.getPropertyValue('--p-indigo-400'),
          pointBackgroundColor: documentStyle.getPropertyValue('--p-indigo-400'),
          pointBorderColor: documentStyle.getPropertyValue('--p-indigo-400'),
          pointHoverBackgroundColor: textColor,
          pointHoverBorderColor: documentStyle.getPropertyValue('--p-indigo-400'),
          data: [65, 59, 90, 81, 56, 55, 40],
        },
        {
          label: 'My Second dataset',
          borderColor: documentStyle.getPropertyValue('--p-purple-400'),
          pointBackgroundColor: documentStyle.getPropertyValue('--p-purple-400'),
          pointBorderColor: documentStyle.getPropertyValue('--p-purple-400'),
          pointHoverBackgroundColor: textColor,
          pointHoverBorderColor: documentStyle.getPropertyValue('--p-purple-400'),
          data: [28, 48, 40, 19, 96, 27, 100],
        },
      ],
    }

    radarOptions.value = {
      plugins: {
        legend: {
          labels: {
            fontColor: textColor,
          },
        },
      },
      scales: {
        r: {
          grid: {
            color: textColorSecondary,
          },
        },
      },
    }
  }

  watch(
    [getPrimary, getSurface, isDarkTheme],
    () => {
      setColorOptions()
    },
    { immediate: true }
  )
</script>

<template>
  <Fluid class="grid grid-cols-12 gap-8">
    <div class="col-span-12 xl:col-span-6">
      <div class="card">
        <div class="font-semibold text-xl mb-4">Linear</div>
        <Chart type="line" :data="lineData" :options="lineOptions"></Chart>
      </div>
    </div>
    <div class="col-span-12 xl:col-span-6">
      <div class="card">
        <div class="font-semibold text-xl mb-4">Bar</div>
        <Chart type="bar" :data="barData" :options="barOptions"></Chart>
      </div>
    </div>
    <div class="col-span-12 xl:col-span-6">
      <div class="card flex flex-col items-center">
        <div class="font-semibold text-xl mb-4">Pie</div>
        <Chart type="pie" :data="pieData" :options="pieOptions"></Chart>
      </div>
    </div>
    <div class="col-span-12 xl:col-span-6">
      <div class="card flex flex-col items-center">
        <div class="font-semibold text-xl mb-4">Doughnut</div>
        <Chart type="doughnut" :data="pieData" :options="pieOptions"></Chart>
      </div>
    </div>
    <div class="col-span-12 xl:col-span-6">
      <div class="card flex flex-col items-center">
        <div class="font-semibold text-xl mb-4">Polar Area</div>
        <Chart type="polarArea" :data="polarData" :options="polarOptions"></Chart>
      </div>
    </div>
    <div class="col-span-12 xl:col-span-6">
      <div class="card flex flex-col items-center">
        <div class="font-semibold text-xl mb-4">Radar</div>
        <Chart type="radar" :data="radarData" :options="radarOptions"></Chart>
      </div>
    </div>
  </Fluid>
</template>
